<template>
	<view >
		<u-sticky>
			<view class="head-box  bg-f ">
				<view class="flex-a ju-bt padlr24">
					<view class="block-tit f-s52">
						订单列表
					</view>
					<view class="w-254">
						<u-search 
							placeholder="搜索" 
							v-model="keyword"
							:showAction="false"
						></u-search>
					</view>
				</view>
				<view
					class="tabs-box"
				>
					 <u-tabs 
						:list="tabsList"
						lineColor="#FF7171"
						:current="tabsCurrent"
						 lineWidth="60rpx"
						:activeStyle="{
							color: '#111111',
							fontWeight: 'bold',
							fontSize: '32rpx'
						}"
						@change="tabsChange"
						:scrollable="false"
					></u-tabs>
				</view>
			</view>
		</u-sticky>
		<view class="pad24">
			<view class="tabs-filter flex">
				<view 
					class="filter-li flex-center mar-r20" 
					v-for="(item,index) in filterList"
					:key="index"
					:class="{'filter-li-on': index == filterId}"
				>
					{{ item.name }}
				</view>
			</view>
			<view class="list-box">
				<view 
					class="list-li bg-f mar-t20 padlr20 padtb24 bor-r16" 
					v-for="(item, index) in 3"
					:key="index"
					@click="$goRouter('/pages/my/pages/orderDetail')"
				>
					<view class="flex-a ju-bt">
						<view class="block-tit f-s28">
							下单时间：2024-10-20 12:18
						</view>
						<view class="li-status cor-FF7171">
							待送达
						</view>
					</view>
					<u-line margin="24rpx 0 "></u-line>
					<view class="address-box" v-if="index != 1">
						<view class="flex">
							<view>
								<u--image
									:showLoading="true" 
									:src="getImg('qu-icon')"
									width="40rpx" 
									height="40rpx"
								></u--image>
								<view class="adress-distance w-40 mar-t22">
									1.6km
								</view>
							</view>
							<view class="block-tit pad-l16">
								<view>长沙爱美丽美容院</view>
								<view class="address-detial mar-t8">长沙芙蓉区27路282号2834室</view>
							</view>
						</view>
						<view class="flex mar-t22">
							<u--image
								:showLoading="true" 
								:src="getImg('song-icon')"
								width="40rpx" 
								height="40rpx"
							></u--image>
							<view class="block-tit pad-l16">
								<view>黄若溪  1334725820</view>
								<view class="address-detial mar-t8">长沙芙蓉区27路282号2834室</view>
							</view>
						</view>
						<view class="li-price flex-a ju-bt mar-t46">
							<view class=" flex-a">
								<u--image
									:showLoading="true" 
									:src="getImg('time-icon2')"
									width="30rpx" 
									height="30rpx"
								></u--image>
								<view class="block-tit mar-l22">还剩3分钟送达</view>
							</view>
							<view class="">
								<text class="f-s28">¥</text>
								<text class="f-s48">4500</text>
							</view>
						</view>
					</view>
					<view class="li-sale-info flex" v-else>
						<u-avatar 
							:src="getImg('vip-grid-icon2')" 
							size="104rpx"
						></u-avatar>
						<view class="sale-r address-box h-104 pad-l16">
							<view class="block-tit">
								陈雅馨｜长沙爱美丽美容院-美容师
							</view>
							<view class="address-detial mar-t16">
								长沙芙蓉区27路282号2834室
							</view>
						</view>
					</view>
					<u-line margin="22rpx 0 "></u-line>
					<view class="li-btns flex flex-j-end">
						<view 
							class="btn" 
							v-if="[0,3].includes(tabsCurrent)"
						>
							联系售后
						</view>
						<view 
							class="btn btn-confirm" 
							v-if="[0,4].includes(tabsCurrent)"
						>
							再来一单
						</view>
						<view class="flex" v-if="[0,1,2].includes(tabsCurrent)">
							<view class="btn" >电话联系</view>
							<view class="btn btn-confirm mar-l20">确认送达</view>
						</view>
						<view 
							class="btn btn-canel mar-l20" 
							v-if="[0,4].includes(tabsCurrent) && index == 1"
						>
							取消预约
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				tabsList: [
					{
						name: "全部"
					},
					{
						name: "待处理"
					},
					{
						name: "服务中"
					},
					{
						name: "已完成"
					},
					{
						name: "已取消"
					},
				],
				tabsCurrent: 4,
				filterList: [
					{
						name: "全部"
					},
					{
						name: "到店"
					},
					{
						name: "外送"
					},
					{
						name: "上门"
					},
				],
				filterId: 0,
			}
		},
		onLoad() {
			
		},
		methods: {
			tabsChange(eve) {
				this.tabsCurrent = eve.index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		.list-li {
			.li-price {
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF7171;
			}
			.li-sale-info {
				.sale-r {
					width: calc(100% - 104rpx);
				}
			}
			.li-btns {
				.btn {
					width: 200rpx;
					height: 68rpx;
					background: #DBF0FF;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #0094FF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.btn-confirm {
					background: #FF7171;
					color: #FFFFFF;
				}
				.btn-canel {
					background: #F5F5F5;
					color: #666666;
				}
			}
			.li-status {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
			}
			.address-box {
				.adress-distance {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					word-wrap:break-word;
					line-height: 24rpx;
				}
				.address-detial {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}
	.tabs-filter {
		.filter-li {
			width: 128rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.filter-li-on {
			background: #FF7171;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
